<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线留言</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入公共样式表 common.css -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入在线留言样式表 index.css -->
    <link rel="stylesheet" href="css/onlineMessage.css">
</head>
<body>
    <!-- 欢迎来到家居网 -->
    <div id="head">
        <div class="container clearfix">
            <span class="fl">欢迎来到HOUSE家居网！</span>
            <div class="fr">
                <a href="#"><img src="images/tel.png" alt="">400-00-000xxx</a>
                <a href="#"><img src="images/mail.png" alt="">1234567xxx@gmail.com</a>
            </div>
        </div>
    </div>
    <!-- logo和导航栏 -->
    <div id="nav" class="container clearfix">
        <a href="#" class="fl"><img src="images/logo.png" alt=""></a>
        <ul class="fr clearfix">
            <li><a href="index.html">首页</a></li>
            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="productsShow.html">产品展示</a></li>
            <li><a href="newsList.html">新闻动态</a></li>
            <li class="active"><a href="onlineMessage.html">在线留言</a></li>
            <li><a href="contactUs.html">联系我们</a></li>
        </ul>
    </div>
    <!-- 大图片 -->
    <div id="bigpic">
        <a href="#"><img src="images/banner5.jpg" alt=""></a>
    </div>
    <!-- 图片下方文字 -->
    <div id="word">
        <div class="container">
            <p>首页 >> 在线留言</p>
        </div>
    </div>
    <!-- 在线留言 -->
    <div id="onlineMessage" class="container">
        <div class="title">
            <div>
                在线留言
            </div>
        </div>
        <div class="content clearfix">
            <div class="left fl">
                <ul>
                    <li><a href="#">床上用品</a></li>
                    <li><a href="#">家居饰品</a></li>
                    <li><a href="#">居家日用</a></li>
                    <li><a href="#">家居收纳</a></li>
                    <li><a href="#">厨房收纳</a></li>
                    <li><a href="#">厨房餐饮</a></li>
                </ul>
                <a href="#"><img src="images/03_f0hi.jpg" alt=""></a>
            </div>
            <div class="right fl">
                <form action="#">
                    <h1>您可以留下您宝贵的意见，我们会在第一时间回复您，谢谢关注！</h1>
                    您的姓名<span>*</span><br>
                    <input type="text" required name="yourName" class="input1">
                    您的电话<span>*</span><br>
                    <input type="number" required name="yourTel" maxlength="11" minlength="11" class="input1">
                    您的邮箱<span>*</span><br>
                    <input type="email" required name="yourEmail" class="input1">
                    咨询项目<span>*</span><br>
                    <label><input type="checkbox" name="yourProject">床上用品</label>
                    <label><input type="checkbox" name="yourProject">家居饰品</label>
                    <label><input type="checkbox" name="yourProject">居家日用</label>
                    <label><input type="checkbox" name="yourProject">收纳用具</label>
                    <label><input type="checkbox" name="yourProject">厨房收纳</label>
                    <label><input type="checkbox" name="yourProject">厨房餐饮</label>
                    <br>
                    咨询内容<span>*</span><br>
                    <textarea></textarea>
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
        <div class="container">
            <div class="top clearfix">
                <div class="contact">
                    <a href="#"><img src="images/logo2.jpg" alt=""></a>
                    <a href="#">
                        <div class="pic1">&emsp;&emsp;中国上海市xxx区xxx路12号moumou大厦5层5xx室</div>
                    </a>
                    <a href="#">
                        <div class="pic2">&emsp;&emsp;400-000-xxxx / (021)-1234578xxx</div>
                    </a>
                    <a href="#">
                        <div class="pic3">&emsp;&emsp;12385963xxxx@gmail.com</div>
                    </a>
                </div>
                <div class="interlinkage clearfix">
                    <h1>快速链接</h1>
                    <ul>
                        <li><a href="#">> 网站首页</a></li>
                        <li><a href="#">> 产品展示</a></li>
                        <li><a href="#">> 在线留言</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">> 关于我们</a></li>
                        <li><a href="#">> 新闻动态</a></li>
                        <li><a href="#">> 联系我们</a></li>
                    </ul>
                </div>
                <div class="search">
                    <h1>站内搜索</h1>
                    <form action="#">
                        <input type="text" placeholder=" 请输入关键字"><button type="submit">搜索</button>
                    </form>
                    <a href="#">关注我们 <img src="images/fenxiang.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="container">
                <p>Copyright © 2009-2011,www.XXXXXX.com,All rights reserved 沪ICP备XXXXXXX号未经同意,不得转载</p>
            </div>
        </div>
    </div>
</body>
</html>